<template>
  <div class="goods home">
    <div ref="mescroll" class="mescroll">
      <div v-if="goodsList && goodsList.length>0">
        <div class="goods bgfff">
          <div class="goods-list">
            <div class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="router({path: './goodsDetails'})">
              <span class="img"><img :v-if="item.img" :src="item.img" alt=""></span>
              <p class="goods-name">{{item.title}}</p>
              <p class="price">
                <span class="curr">￥{{item.price}}</span>
                <span class="before">原价<s>￥{{item.market_price}}</s></span>
              </p>
            </div>
          </div>
        </div>
        <div class="cart" @click="router({path: './cart'})">
          <img src="@/assets/shangcheng6.png" alt="">
          <span class="num">{{cart_num}}</span>
        </div>
      </div>
      <div class="none" v-else>
        <img src="@/assets/kongzhuangtai.png" alt="">
        <p>该分类暂无内容</p>
      </div>
    </div>
  </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { getGoodsList, getCarts } from '@/api/api'

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data () {
    return {
      bannerHome: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      mescroll: null,
      goodsList: [],
      cart_num: 0,
    }
  },
  created () {
    this.cate_id = this.$route.query.id
    this.get_carts()
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    upCallback (page) {      
      getGoodsList(page.num, page.size, this.cate_id).then((res) => {
        if (page.num == 1){
          this.goodsList = []
        }
        console.log(res)
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info);
        })
        this.goodsList = this.goodsList.concat(res.data.info)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    },
    // 获取购物车列表
    get_carts() {
      getCarts(1).then((res) => {
        this.cart_num = res.data.info.lists.length
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .home
    max-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #f5f5f5
      .goods
        .goods-list
          overflow hidden
          padding 0 1.5rem
          padding-top 1.5rem
          .goods-item
            float left
            width calc(50vw - 2.25rem)
            margin-right 1.5rem
            margin-bottom 1rem
            &:nth-child(2n)
              margin-right 0
            .img
              display flex
              height calc(50vw - 2.25rem)
              img
                object-fit cover
            .goods-name
              color #333
              font-size 1.3rem
              font-weight 400
              line-height 2.4rem
              text-overflow ellipsis
              overflow hidden
              white-space nowrap
              margin-bottom .5rem
            .curr
              font-size 1.7rem
              color #333
              font-weight bold
            .before
              color #999
              font-size 1.2rem
              line-height 2.2rem
              margin-left 1rem
      .cart
        position fixed
        right 0
        bottom 6rem
        width 8rem
        .num
          position absolute
          right 1rem
          top 1rem
          color #fff
          background-color #FE9700
          border-radius .2rem
          padding 0 .3rem
          font-size 1rem
    .none
      position absolute
      width 100%
      height 100vh
      overflow hidden
      background-color #f5f7fa
      img
        width 21.5rem
        margin-top 12rem
        position relative
        left 50%
        margin-left -10.75rem
      p
        color #333333
        font-size 1.3rem
        margin-top 4rem
        text-align center
</style>